<template>
	<view class="content">
		<view class="text-wrap">
			<text class="text-title">验证码已发送至</text>
			<view class="text-tel-wrap">
				<text class="text-tel">+86 {{tel}}</text>
				<text class="get-again" @tap="getAgain">重新获取</text>
			</view>
			<view class="input-wrap">
				<view class="nums">
					<view class="num-item" v-for="(item,index) in nums" :key="index">
						<text>{{item}}</text>
						<view class="border"></view>
						<view class="border1" :class="{'border-active': item !== ''}"></view>
					</view>
				</view>
				<input class="input-el" focus :maxlength="4" type="number" @input="input" >
			</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from "../../common/config.js";
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				tel: '',
				psd: '',
				inputNum: ''
			}
		},
		onLoad(options) {
			this.tel = options.tel;
			this.psd = options.psd;
		},
		computed: {
			nums() {
				var arr = ['', '', '', ''];
				this.inputNum.split('').forEach((t, i) => {
					arr[i] = t;
				})
				return arr;
			}
		},
		methods: {
			getAgain() {
				this.$request('/captch/sent', {
					phone: this.tel
				});
			},
			input(e) {
				this.inputNum = e.detail.value;
				if (this.inputNum.length === 4) {
					this.$request('/captch/verify', {
						phone: this.tel,
						captcha: this.inputNum
					}).then((res) => {
						return this.$request('/captch/register', {
							phone: this.tel,
							password: this.psd,
							captcha: this.inputNum
						});
					}).then((res) => {
						uni.showToast({
							title: '注册成功',
							icon:"success",
							mask: true,
							duration: 1000
						})
						// 登录一样
						var userInfo = {
							nickname: res.profile.nickname,
							uid: res.profile.userId,
							avatarUrl: res.profile.avatarUrl
						};
						this.login(userInfo)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/main'
							});
						}, 1000);
					});
				}
			},
			...mapMutations(['login'])
		}
	}
</script>

<style lang="scss">
	page, .content{
		width: 100%;
		height: 100%;
	}
	.content {
		background: url("../../static/imgs/login/login-background1.png") no-repeat;
		background-size: cover;
		.text-wrap{
			padding: 100upx 40upx;
			.text-title{
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
			}
			.text-tel-wrap{
				margin-top: 10upx;
				display: flex;
				justify-content: space-between;
				.text-tel{
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
				.get-again{
					font-size: $uni-font-size-sm;
					color: $uni-text-color-a;
				}
			}
		}
		.input-wrap{
			margin-top: 40upx;
			width: 100%;
			height: 100upx;
			position: relative;
			.input-el{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100upx;
				z-index: 1;
				opacity: 0;
			}
			.nums{
				width: 90%;
				height: 100%;
				margin: 0 auto;
				display: flex;
				.num-item{
					flex: 1;
					margin: 0 20upx;
					position: relative;
					text-align: center;
					line-height: 80upx;
					.border, .border1{
						position: absolute;
						bottom: 0;
						left:0;
						width: 100%;
						height: 4upx;
						background: #eee;
					}
					.border1{
						width: 0;
						background: #333;
						transition: all 0.3s ease;
						&.border-active{
							width: 100%;
						}
					}
				}
			}
		}
	}
</style>
